<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="用户IP检测" subTitle="列表" />
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <div class="crud_content">
      <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
        v-model="crudData.form" @selection-change="selectionChange" @refresh-change="refreshChange"
        @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange" ref="crud"
        @on-load="onLoad">
        <template #menu-left>
          <!--          <el-button type="primary" @click="addTo" icon="el-icon-plus">新增</el-button>-->
          <!-- <el-button type="danger" icon="el-icon-delete" @click="rowDelete">批量删除
          </el-button> -->
        </template>
        <template #status="{ row }">
          <el-tag type="danger" v-if="row.status == '1'"> 失败</el-tag>
          <el-tag type="success" v-if="row.status == '0'"> 成功</el-tag>
        </template>
        <template #ipaddrDisable="{ row }">
          <el-switch v-model="row.ipaddrDisable" style="--el-switch-on-color: #4E9876; " :inactive-value="0"
            @click="handleSwitchChange(row)" />
        </template>
      </avue-crud>
    </div>
    <el-dialog v-model="crudData.addView" :title="crudData.tit" width="70%" append-to-body destroy-on-close>
      <div style="padding: 2%">
        <avue-form :option="optionForm" :data="crudData.formData" ref="formRef" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" icon="el-icon-circle-check" @click="saveSubmit(crudData.tit)">{{
            crudData.tit === '新增' ? '保存' : '修改'
          }}
          </el-button>
          <el-button icon="el-icon-circle-close" @click="crudData.addView = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="crudData.confirmDeleteVisible" append-to-body title="" width="440" destroy-on-close center
      class="custom-dialog">
      <div class="swal2-header">
        <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
        <div class="swal2_fs">确认删除？</div>
      </div>
      <div class="swal2_he">ID - {{ crudData.indexId }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" class="btn btn-primary" @click="handleDeleteConfirm">
            确认
          </el-button>
          <el-button class="btn" type="" @click="handleDeleteCancel">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>

  </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
import { ipList, ipDisable } from '@/api/user'
// import {getList} from "@/api/user/overview.js";
import TitleComponent from '@/components/title/index.vue';
import { useRouter } from 'vue-router';
import BasicContainer from "@/components/basic-container/main.vue";

let crud: any = ref('')
let formRef: any = ref('')
let option: any = reactive({
  height: 'auto',
  calcHeight: 80,
  searchShow: true,
  searchMenuSpan: 6,
  tip: false,
  border: true,
  index: false,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  addBtn: false,
  dialogWidth: '40%',
  menuFixed: 'right',
  gridBtn: true,
  labelWidth: 130,
  menu: false,
  selection: false,
  searchLabelWidth: 100,
  indexLabel: '序号',
  saveBtnText: '确定',
  refreshBtn: true, // 刷新按钮
  columnBtn: true,
  searchShowBtn: false,
  indexWidth: 60,
  column: [
    {
      label: "登陆账号",
      prop: "userName",
      search: true,
      hide: true,
      span: 24,
    },
    {
      label: "ID",
      prop: "infoId",
      search: true,
      sortable: true,
      span: 24,
    },
    {
      label: "用户来源",
      prop: "userChannel",
      type: "select",
      filters: true,
      filterMethod: function (value, row, column) {
        return row.userChannel === value;
      },
      search: true,
      dicData: [
        {
          label: '后台用户',
          value: 'ADMIN_USER'
        },
        {
          label: '客户端用户',
          value: 'CLIENT_USER'
        }
      ],
      span: 24,
    },
    {
      label: "登陆账号",
      prop: "userName",
      span: 24,
    },
    {
      label: "IP",
      prop: "ipaddr",
      search: true,
      span: 24,
    },
    {
      label: "登录地点",
      prop: "loginLocation",
      search: true,
      span: 24,
    },
    {
      label: "登录系统",
      prop: "os",
      search: true,
      span: 24,
    },
    {
      label: "登录状态",
      prop: "status",
      type: "select",
      search: true,
      dataType: 'string',
      filters: true,
      filterMethod: function (value, row, column) {
        return row.status === value;
      },
      dicData: [
        {
          label: '成功',
          value: '0',
        },
        {
          label: '失败',
          value: '1',
        }
      ],
      span: 24,
    },
    {
      label: "禁用此IP",
      prop: "ipaddrDisable",
      span: 24,
    },
    {
      label: "访问时间",
      prop: "loginTime",
      sortable: true,
      span: 24,
    },
    {
      label: "更新时间",
      prop: "updateTime",
      sortable: true,
      hide: true,
      span: 24,
    },
  ]
})
let crudData: any = reactive({
  loadingSubmit: false,
  loadingSave: false,
  confirmDeleteVisible: false,
  addView: false,
  deleteFlag: false,
  selectList: [],
  index_unit: [],
  tit: '',
  indexId: '',
  loading: true,
  active: 1,
  page: {
    pageSize: 10,
    currentPage: 1,
    total: 0
  },
  filedArr: [],
  data: [],
  firstLoad: true // 添加一个标志表示是否是首次加载
})
let optionForm: any = reactive({
  submitBtn: false,
  emptyBtn: false,
  labelWidth: 100,
  column: [
    {
      label: 'User Id',
      prop: 'userId'
    },
    {
      label: 'Ip',
      prop: 'ip'
    },
    {
      label: 'Status',
      prop: 'Status',
      type: 'switch',
      dicData: [
        {
          label: '',
          value: 0
        }, {
          label: '',
          value: 1
        }
      ]
    },
    {
      label: 'Ipstatus',
      prop: 'Ipstatus',
      type: 'switch',
      dicData: [
        {
          label: '',
          value: 0
        }, {
          label: '',
          value: 1
        }
      ]
    }
  ]
})

function addTo() {
  crudData.tit = '新增'
  crudData.addView = true
}

function refreshChange() {
  onLoad(crudData.page);
}

function searchChange(params: any, done: () => void) {
  crudData.query = params;
  crudData.page.currentPage = 1;
  onLoad(crudData.page, params);
  done();
}

function searchReset() {
  crudData.query = {};
  onLoad(crudData.page);
}

function currentChange(currentPage: any) {
  crudData.page.currentPage = currentPage;
}

function sizeChange(pageSize: any) {
  crudData.page.pageSize = pageSize;
}

function rowDelete() {
  if (crudData.selectList.length === 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }
  crudData.indexId = crudData.selectList.map(item => item.index).join(',')
  crudData.confirmDeleteVisible = true
}

function handleDeleteConfirm() {
  ElMessage.success('删除成功')
  crudData.confirmDeleteVisible = false
}

function handleDeleteCancel() {
  crudData.confirmDeleteVisible = false
}

function selectionChange(list) {
  crudData.selectList = list
  crudData.deleteFlag = crudData.selectList.length > 0;
}

function saveSubmit(val: any) {
  formRef.value.validate((valid, done) => {
    if (valid) {
      if (val === '新增') {
        ElMessage.success('保存成功')
      } else {
        ElMessage.success('修改成功')
      }
      done()
    } else {
      done()
    }
  })
}

const handleSwitchChange = (row) => {
  ipDisable(row).then((res) => {
    ElMessage.success('操作成功')
    onLoad(crudData.page)
  }).catch((err) => {
  })
}

// 跳转路由
const router = useRouter();

const handleAdd = () => {
  router.push('/user/userIpDetection/add');
}


const onLoad = (page: any, params = {}) => {
  crudData.loading = true;
  ipList(page.currentPage, page.pageSize, Object.assign(params, crudData.query)).then((res: any) => {
    const Data = res;
    crudData.page.total = Data.total;
    crudData.data = Data.rows;
    crudData.loading = false;
  });
  // crudData.loading = false;
  // crudData.data = [
  //   {
  //     id: '662303',
  //     index: '662303',
  //     account: '4412349654',
  //     test: '212.87.194.6',
  //     test1: 'VIP3',
  //     test2: '2023-06-19 05:40:22',
  //     test3: '2024-06-18 05:48:04',
  //     test4: '2023-06-19 05:29:59',
  //   },
  //   {
  //     id: '662301',
  //     index: '662301',
  //     account: '441223784',
  //     test: '36.5.220.246',
  //     test1: 'VIP4',
  //     test2: '2023-06-17 05:40:22',
  //     test3: '2024-06-12 05:48:04',
  //     test4: '2023-06-14 05:29:59',
  //   }
  // ]
  // crudData.page.total = crudData.data.length;
  // setTimeout(() => {
  //   crudData.firstLoad = false;
  // }, 1000);
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}

.add-button {
  margin-left: 20px;
}

.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  zoom: normal;
  border: 0.25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92%;
  font-size: 3.75em;
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}

.swal2_fs {
  margin: 0 0 0.4em;
  padding: 0;
  font-size: 25px;
  color: #595959;
  text-align: center;
  font-weight: 400 !important;
}

.swal2_he {
  text-align: center;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  word-wrap: break-word;
}

.btn {
  padding: 0.54rem 1.2rem !important;
  height: 34px;
  line-height: 1.2;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
    0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}

.btn-primary {
  color: #fff;
  background-color: #4e9876;
  border-color: #4e9876;
}
</style>
